<template>
        <div>
                <div class="topa">
                        <input type="text"
                               placeholder="输入商家，商品名称">
                </div>
                <div class="topb">
                        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F041621122252%2F210416122252-1-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668256886&t=e2c500376dc0da711bb247730beeacb4"
                             alt="">
                </div>

                <div class="top4">
                        <span @click="fun(index)"
                              v-for="(item,index) in list1"
                              :key="index">{{item}}</span>

                </div>
                <div class="topc">
                        <div class="top3"
                             @click="todetail(item)"
                             v-for="(item,index) in shoplist"
                             :key="index">
                                <div class="top1">
                                        <img :src="item.picUrl"
                                             alt="">

                                </div>
                                <div class="top2">
                                        <p>{{item.name}}</p>
                                        <p>{{item.monthSalesTip}}</p>
                                        <p>距您默认地址{{item.deliveryTimeTip}}米</p>
                                        <p>{{item.averagePriceTip}}</p>

                                </div>
                        </div>

                </div>
        </div>

</template>

<script>
import { shop_list } from '../../utils/api'
var pic = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.ivsky.com%2Fimg%2Ftupian%2Ft%2F201807%2F28%2Fzaoxinggeyidetianpintupian-002.jpg&refer=http%3A%2F%2Fimg.ivsky.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668257571&t=e2aeb541f9aea2bb4e0895234b17f3b7"
export default {
        data () {
                return {
                        // list: [
                        //         { pic, name: "小蛋挞", sales: "150", distance: "300", price: "20" },
                        //         { pic, name: "肉松小贝", sales: "300", distance: "600", price: "40" },
                        //         { pic, name: "甜品糕点", sales: "200", distance: "400", price: "30" },
                        // ],
                        list1: ["综合排序", "距离最近", "销量最高", "筛选"],
                        shoplist: [],

                }
        },
        methods: {
                fun (index) {
                        if (index == 1) {
                                this.list.sort((a, b) => {
                                        return a.distance - b.distance;
                                })
                        } else if (index == 2) {
                                this.list.sort((a, b) => {
                                        return b.sales - a.sales;
                                })
                        }

                },
                todetail (item) {
                        this.$router.push('/detail/' + item.mtWmPoiId
                        )

                }
        },
        mounted () {
                shop_list().then((ok) => {
                        console.log(ok.data);
                        this.shoplist = ok.data.list;
                })
        }


}
</script>

<style lang="scss" scoped>
.topa {
        padding: 10px;
        box-sizing: border-box;
        width: 100%;
        background-color: cornflowerblue;
        > input {
                width: 100%;
                height: 40px;
                text-align: center;
                color: #555;
                background-color: white;
                border: none;
                outline: none;
                border-radius: 50px;
        }
}

.topb img {
        width: 100%;
        height: 150px;
        padding: 10px;
        box-sizing: border-box;
}

.topc .top3 {
        // display: flex;
        margin: 10px;
        display: flex;
        // justify-content: space-between;
}
.top1 img {
        width: 100px;
        height: 100px;
        margin-right: 20px;
}
.top2 p {
        margin-bottom: 8px;
}
.top2 p:nth-child(1) {
        font-size: 23px;
        font-weight: bold;
        color: red;
}
.top4 {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        > span {
                background-color: #999;
                height: 30px;
                width: 20%;
                border-radius: 20px;
                text-align: center;
                line-height: 30px;
        }
}
</style>